<template>
  <li class="cml-module-item"
    ref="cmlItem"
    v-if="isShowItem"
    :class="[showDetailPanel ? 'cml-active' : '']">
    <p class="cml-module-item-t">{{ title }}</p>
    <span class="cml-module-item-o"
      :style="{'padding-right': isShowMore}">
      <slot></slot>
    </span>
    <div class="cml-more"
      v-if="hasMore">
      <base-more @change="more"
        :isActive='showDetailPanel'></base-more>
    </div>
    <detail-box v-bind="$attrs"
      v-on="$listeners"
      v-if="showDetailPanel"
      :showControl.sync="showDetailPanel">
      <slot name="detail"></slot>
    </detail-box>
  </li>
</template>
<script>
import DetailBox from './detail-box'
import BaseMore from './base-more'

export default {
  name: 'CmlModuleItem',
  inheritAttrs: false,
  components: {
    DetailBox,
    BaseMore
  },
  model: {},
  props: {
    // 功能模块名称
    title: {
      type: String,
      default: 'Pass Name'
    }
  },
  data() {
    return {
      hasMore: false, // 是否包含more面板
      showDetailPanel: false,
      isShowItem: true
    }
  },
  computed: {
    // 控制是否有showmore的样式
    isShowMore() {
      let pd = this.hasMore ? 0 : 30
      return pd + 'px'
    }
  },
  watch: {},
  created() {},
  mounted() {
    if (this.$slots.detail) {
      this.hasMore = true
    }
  },
  beforeDestroy() {},
  methods: {
    // 更多按钮调用的方法
    more() {
      if (!this.hasMore) return
      this.showDetailPanel = !this.showDetailPanel
    }
  }
}
</script>
<style lang="scss" scoped>
</style>